I am trying to display data with vuex from api using store (vuex)
so this is my store.js file :
import { createStore } from 'vuex'
import countries from './module/countries'
const store = createStore({
modules: {
countries
}
});
export default store;
countries.js file
import axios from "axios";
const state = {
countries: []
};
const getters = {
getCountries: () => {
return state.countries;
}
};
const mutations = {
setCountries(state, countries) {
state.countries = countries;
}
};
const actions = {
getCountries ({ commit }) {
axios.get("https://localhost:44391/api/Pho/GetCountries").then(response => {
commit('setCountries', response.data);
})
}
};
export default {
namespaced: true,
state,
getters,
mutations,
actions
};
and this is my component
methods: {
getCountries() {
this.$store.dispatch('getCountries');
},
When i run the application i got this error [vuex] unknown action type: getCountries
You are using namespaced modules, so try like:
this.$store.dispatch('countries/getCountries');
and call your geter like:
computed: {
getData() {
return this.$store.getters['countries/getCountries']
}
}